const html =  `
<div v-show="modelValue">
    
    <div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;background:rgba(0,0,0,0.4)"></div>
    <div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;display:flex;justify-content: center;">
        <div :style="{width:width+'px',height:height+'px'}" style="margin-top:100px;border:1px solid rgba(0,0,0,0.1);border-radius:5px;background:white;box-shadow:0 0px 15px rgba(0,0,0,0.1);">
            <div style="display:flex;justify-content: space-between;align-items:center;height:58px;padding:0px 20px;box-shadow:0px 1px 2px rgba(0,0,0,0.1)" >
                <span style="color:#1f2225;font-size:18px;">{{title}}</span>
                <span @mouseover="closeColor='#000000'" @mouseout="closeColor='#AAAAAA'" :style="{color:closeColor}" style="cursor:pointer;font-size:14px;" @click="$emit('update:modelValue',false)" >关闭</span>
            </div>
            <div style="padding:20px;overflow:auto;" :style="{height:height-78+'px'}" ><slot></slot></div>
        </div>

    </div>
</div>

`;




const XDialog = {
    install(app, options) {
        app.component('x-dialog', this);
    },
    props:{
        modelValue:{
            type:Boolean,
            default:false
        },
        width:{
            type:Number,
            default:700
        },
        height:{
            type:Number,
            default:540
        },
        title:{
            type:String,
            default:'标题'
        }
    },
    
    setup(props) {

        const closeColor = Vue.ref('#AAAAAA');

       
        
        return {
            closeColor
        };
    },
    template: html,
};